<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>轮播图</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="static/css/style.css">
		<style>
			.layui-table-cell {
				height: auto;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>轮播图：</legend>
			</fieldset>
			<button type="button" class="layui-btn layui-btn-primary add">添加轮播图</button>
			<table id="demo2" lay-filter="test2"></table>
		</div>
		<script type="text/html" id="barDemo2">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="qiyon">启用</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="tingy">停用</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script type="text/html" id="barDemo1">
			<img src="{{d.phth}}" />
		</script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/common.js"></script>
		<script src="layui/layui.js"></script>
		<script src="layer-v3.1.1/layer/mobile/layer.js"></script>
		<script>
			var layer;
			var table;
			$(function() {
				layui.use(['element', 'layer', "table"],
					function() {
						var $ = layui.jquery,
							element = layui.element;
						layer = layui.layer;
						table = layui.table;
						adlist();
					});

				$(".add").click(function() {
					layer.open({
						type: 2,
						title: '添加图片广告位',
						maxmin: true,
						shadeClose: true, //点击遮罩关闭层
						area: ['800px', '740px'],
						content: 'adimg.html',
						cancel: function() {
							//右上角关闭回调
							adlist();
						}
					});
				})

			})

			function adlist() {
				$.ajax({
					type: "POST", //提交方式					
					url: baseurl + "/banner/queryBanner", //路径
					dataType: 'json',
					data: {}, //数据，这里使用的是Json格式进行传输 
					success: function(data) { //返回数据根据结果进行相应的处理 
						console.log(data.data);
						var list = data.data;
						//第一个实例
						table.render({
							elem: '#demo2',
							data: list, //数据接口
							page: true,
							align: 'center',
							cols: [
								[{
									field: 'id',
									title: 'ID',
									width: 240,
									align: 'center',

								}, {
									field: 'dinName',
									title: '商家名称',
									width: 200,
									align: 'center',

								}, {
									field: 'phth',
									title: '轮播图',
									width: 150,
									templet: '#barDemo1',
									event: 'aaaa',
									align: 'center',

								}, {
									field: 'postion',
									title: '轮播位置',
									width: 142,
									align: 'center',

								}, {
									field: 'types',
									title: '是否使用',
									width: 240,
									align: 'center',
									sort: true,
								}, {
									field: 'time',
									title: '添加时间',
									width: 200,
									align: 'center',
									sort: true,

								}, {
									title: '操作',
									width: 250,
									toolbar: '#barDemo2',
									align: 'center',
								}]
							]

						})

						table.on('tool(test2)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
							var data = obj.data; //获得当前行数据
							var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
							var tr = obj.tr; //获得当前行 tr 的DOM对象
							var id = obj.data.id;
							var path = obj.data.path;
							if(layEvent === 'del') { //删除
								layer.confirm('确定要删除吗' + id,
									function(index) {
										$.ajax({
											type: "POST", //提交方式 
											url: baseurl + "/banner/deledteBanner", //路径 
											dataType: 'json',
											data: {
												id: id,
											}, //数据，这里使用的是Json格式进行传输 
											success: function() {
												location.reload();
											}
										})
										layer.close(index);
									})

							} else if(layEvent === 'aaaa') {
								layer.photos({
									photos: {
										"data": [ //相册包含的图片，数组格式
											{
												"alt": "轮播图",
												"pid": 666, //图片id
												"src": phth, //原图地址
												"thumb": phth //缩略图地址
											}
										],
									},
									anim: 3 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
								});
							} else if(layEvent === 'qiyon') {
								layer.confirm('确定要启用吗',
									function(index) {
										$.ajax({
											type: "POST", //提交方式 
											url: baseurl + "/banner/updateType", //路径 
											dataType: 'json',
											data: {
												id: id,
											}, //数据，这里使用的是Json格式进行传输 
											success: function() {
												location.reload();
											}
										})
										layer.close(index);
									})
							}else if(layEvent === 'tingy') {
								layer.confirm('确定要停用吗',
									function(index) {
										$.ajax({
											type: "POST", //提交方式 
											url: baseurl + "/banner/updatype", //路径 
											dataType: 'json',
											data: {
												id: id,
											}, //数据，这里使用的是Json格式进行传输 
											success: function() {
												location.reload();
											}
										})
										layer.close(index);
									})
							}
						})

					}
				})

			}
		</script>
	</body>

</html>